    <template>
        <div class="main">
        <div class="backImg"></div>
        <div class="register">
            <div class="title">
            <span>注册账号</span>
            </div>
            <div class="list">
            <el-input
                prefix-icon="el-icon-user"
                placeholder="请输入账号"
                v-model="registerForm.username"
            ></el-input>
            </div>
            <div class="list">
            <el-input
                prefix-icon="el-icon-unlock"
                placeholder="请输入密码"
                show-password
                v-model="registerForm.password"
            ></el-input>
            </div>
            <div class="list">
            <el-input
                prefix-icon="el-icon-unlock"
                placeholder="请确认密码"
                show-password
                v-model="registerForm.confirm"
            ></el-input>
            </div>
            
            <div class="btn">
            <button @click="registerClick">注册</button>
            <!-- 返回登录页的链接 -->
            <router-link to="/" class="login-link">
                返回登录
            </router-link>
            </div>
        </div>
        </div>
    </template>
    
    <script>
import axios from 'axios';
import {ElMessage} from 'element-plus'
    export default {
        data() {
        return {
            registerForm: {
            username: "",
            password: "",
            confirm: ""
            }
        };
        },
        methods: {
        registerClick() {
            if(this.registerForm.username == ""){
                ElMessage({
      message: "用户名不能为空",
      type: 'error',
      duration: 2000
    })
                return;
            }
            // 注册逻辑
            console.log('注册信息：', this.registerForm);
            axios.post("http://localhost:8080/user/register",this.registerForm).then(res =>{
                if(res.data == "注册成功"){
                    ElMessage({
      message: res.data,
      type: 'success',
      duration: 2000
    })
                }else{
                    ElMessage({
      message: res.data,
      type: 'error',
      duration: 2000
    })
                }

            })
        }
        }
    };
    </script>
    
    <style scoped>
    .backImg {
        background: url("../img/back.jpg");
        background-size: 100% 100%;
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
    .register {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid #ccc;
        background: #fff;
        width: 20%;
        padding: 20px 20px 25px 20px;
    }
    .register .title {
        text-align: center;
        padding-bottom: 5px;
    }
    .register .title span {
        font-size: 30px;
        color: #000;
    }
    
    .register .list {
        display: flex;
        align-items: center;
        padding: 8px 0;
    }
    
    .register .list input {
        border-radius: 3px;
        border: none;
        outline: none;
        color: #999;
        border: 1px solid #bdbdbd;
        font-size: 14px;
        line-height: 35px;
        padding: 0 10px;
        display: block;
        box-sizing: border-box;
        flex: 7;
    }
    
    .btn {
        display: flex;
        justify-content: space-between;
        padding-top: 20px;
    }
    
    .btn button {
        font-size: 13px;
        color: #fff;
        background: #46b5ff;
        outline: none;
        border: none;
        line-height: 35px;
        padding: 0 20px;
        cursor: pointer;
    }
    
    .login-link {
        font-size: 14px;
        color: #46b5ff;
        text-decoration: underline;
        cursor: pointer;
    }
    </style>